<template>
    <div class="msg-box-backgound" v-show="showBox" @click="close" @touchmove.stop.prevent>
        <div class="msg-box"  @click.stop="" @touchmove.stop="contentScroll">
            <div class="msg-box-content">
                <p>快试试对话吧</p>
                <ul class="msg-wrapper">
                    <li :class="{ right: msg.right }" v-for="msg in msgList" :key="msg">{{ msg.context }}</li>

                </ul>
                <div class="msg-box-bottom">
                    <input type="text" class="send-input" v-model="message">
                    <button @click="send" class="send-button">发送</button>
                </div>
            </div>
        </div>
    </div>
    <div class="trigger" @click="showBox = true">

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { sendMessage2AI } from '@/js/request'
let showBox = ref(false)
let msgList = ref([{ right: true, context: "比如：我的外卖怎么还没到呢？" }])
let message = ref(null)
let close = () => {
    showBox.value = false;
}
let send = () => {
    if (message.value) {
        // 先把用户的消息推上去
        msgList.value.push({ right: true, context: message.value })
        //msgList.value.push({ right: false, context:" respon.data.detail" })
        sendMessage2AI((respon) => {
            console.log(respon)
            if (respon.data.code == 200) {
                msgList.value.push({ right: false, context: respon.data.detail })
                message.value=null
            }
        }, message.value)
    }
}
let contentScroll=(e)=>{
    if(e.target.className=='msg-wrapper')e.preventDefault()
}
</script>

<style lang="scss" scoped>
.msg-box-backgound {
    width: 100%;
    height: 100%;
    background-color: #4b44448c;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;

    .msg-box {
        position: absolute;
        display: flex;
        top: 50%;
        left: 50%;
        right: 0;
        bottom: 0;
        transform: translate(-50%, -50%);
        margin: auto;
        width: 80%;
        height: 50%;
        background: white;
        border-radius: 10%;

        .msg-box-content {
            margin: 5vw;
            display: flex;
            flex-direction: column;
            flex: 1 1 100%;
            p {
                text-align: center;
                margin-bottom: 1vw;
                color: #68686861;
                font-size: 2vw;
            }

            .msg-wrapper {
                flex: 0 1 100vw;
                border: #4a9691 solid 3px;
                border-radius: 3vw;
                margin-bottom: 3vw;
                padding: 5%;
                display: flex;
                flex-direction: column;
                overflow: scroll;
                
                li {
                    margin-bottom: 2vw;
                    text-align: left;
                }

                .right {
                    text-align: right;
                }

            }

            .msg-box-bottom {
                display: flex;
                flex-direction: row;

                .send-input {
                    flex: 1;
                }

                .send-button {

                    height: 10vw;

                    /* Green */
                    border: none;
                    padding: auto 5vw;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 16px;
                    margin-left: 5vw;
                    -webkit-transition-duration: 0.1s;
                    /* Safari */
                    transition-duration: 0.1s;
                    cursor: pointer;

                    background-color: white;
                    color: black;
                    border: 2px solid #4CAF50;


                }

                .send-button:active {
                    background-color: #4CAF50;
                    color: white;
                }

            }
        }


    }
}

.trigger {
    background-color: #000000;
    background-image: url("@/assets/img/Yefir.jpg");
    background-size: cover;
    position: fixed;
    right: 10vw;
    bottom: 20vw;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    z-index: 1500;
}</style>